<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript" src="../js/httpRequest.js"></script>
<script type="text/javascript">


function getTitle(cate_no){
	//alert(cate_no);
	sendRequest("../ajax/get_title.jsp", "cate_no="+cate_no, resultTitle, "POST");
}
function resultTitle(){
	if(xhr.readyState==4 && xhr.status==200){
		
		var res=eval(xhr.responseText);
		alert(res);
		var dv_t = document.getElementById("dv_t");
		var tb_title = document.getElementById("tb_title").childNodes[1];
		del(tb_title);
		dv_t.style.display="block";
		var dv_s = document.getElementById("dv_s");
		dv_s.style.display="none";
		
		
		if(res.length>0){
			for(var i=0; i <res.length; i++){
				var tr_1 = document.createElement("tr");
				var td_1 = document.createElement("td");
				var td_2 = document.createElement("td");
				var a = document.createElement("a");
				var onClickValue=res[i].title_no;
				var check=document.createElement("input");
				check.setAttribute("name","title_no");
				a.innerHTML=res[i].title_name;
				a.setAttribute("onclick", "getSubject("+onClickValue+")");
				a.setAttribute("href","#");
				check.setAttribute("type", "checkbox");
				check.setAttribute("value", onClickValue);
				
				td_1.appendChild(a);
				td_2.appendChild(check);
				tr_1.appendChild(td_1);
				tr_1.appendChild(td_2);
				tb_title.appendChild(tr_1);
			}
		}
	}
}

function getSubject(title_no){
	//alert(title_no);
	sendRequest("../ajax/get_subject.jsp", "title_no="+title_no, resultSubject, "POST");
}
function resultSubject(){
 	if(xhr.readyState==4 && xhr.status==200){
 		var res=eval(xhr.responseText);
 		var dv_s = document.getElementById("dv_s");
		dv_s.style.display="block";
		var tb_sub = document.getElementById("tb_sub");
		del(tb_sub);
 		if(res.length>0){
			for(var i=0; i <res.length; i++){
				var tr_1 = document.createElement("tr");
				var td_1 = document.createElement("td");
				var td_2 = document.createElement("td");
				var a = document.createElement("a");
				var onClickValue=res[i].subject; 
				var check=document.createElement("input");
				check.setAttribute("name","subject");

				a.innerHTML=res[i].subject;
				a.setAttribute("href","#");
				//a.setAttribute("onclick", "getSubject("+onClickValue+")");
				
				check.setAttribute("type", "checkbox");
				check.setAttribute("value", res[i].subject);
				
				td_1.appendChild(a);
				td_2.appendChild(check);
				tr_1.appendChild(td_1);
				tr_1.appendChild(td_2);
				tb_sub.appendChild(tr_1);
			}
		}
	}
 	//f3.cate_no[checking_num].checked=true;
} 
function del(ob){
	var t_v = ob;
	var cnt = t_v.childNodes.length;
	//alert(cnt);
	for(var i=0; i<cnt; i++){
		t_v.removeChild(t_v.childNodes[0]);
	}
}

function checkedName(name, state){
	//alert(ck.length);
	var val;
	for(var i=0;i<name.length;i++){
		if(name[i].checked){
			checking_num=i;
			if(state=="up"){
				if(name[0].checked)return false;
				checking_num--;
			}else if(state=="down"){
				if(name[name.length-1].checked)return false;
				checking_num++;
			}
			val = name[i].value;
			break;
		}
	}
	return val;
}


//--------------------------------------------------------------------------

function cateList(f, state){
	var name = f.cate_no;
	var param=null;
	var checkedVal = checkedName(name, state);
	if(checkedVal==false||checkedVal==null){
		if(state=="delete"){
			alert("삭제할 목록이 선택되지 않았습니다!");
			return;
		}
		alert("교체할 리스트가 존재하지 않습니다.!");
		return;
	}
	if(state=="delete"){
		if(confirm("삭제 하시겠습니까?")==false)return;
	}
	else if(state=="rename"){
		var new_name=f.cate_value.value;
		var dv_bt1=document.getElementById("modify_bt1");
		var dv_bt2=document.getElementById("modify_bt2");
		
		
		if(new_name==null){
			alert("새로운 항목을 입력하세요");
			return;
		}
		dv_bt1.style.display="block";
		dv_bt2.style.display="none";
		
		param=
			"cate_no="+checkedVal+"&state="+state+"&menu_no="+${menu_no}+"&cate_name="+encodeURIComponent(new_name);
		f.m_value.value="";	
			alert(param);	
	}
	else{
		param="cate_no="+checkedVal+"&state="+state+"&menu_no="+${menu_no};
	}
	
	sendRequest("../ajax/change_category.jsp", param, resultCategory, "POST");
}

function cate_btHidden(f, state){
	var name = f.cate_no;
	var checkedVal = checkedName(name,state);
	
	if(checkedVal==null){
		alert("수정할 항목을 선택하세요!");
		return;
	}
	
	else if(checkedVal!=""||checkedVal!=null){
		var dv_bt1=document.getElementById("modify_bt1");
		dv_bt1.style.display="none";
		var dv_bt2=document.getElementById("modify_bt2");
		dv_bt2.style.display="block";
	} 
		
}

function resultCategory(){
 	if(xhr.readyState==4 && xhr.status==200){
 		var res=eval(xhr.responseText);
		var tb_cate = document.getElementById("tb_cate").childeNodes[1];
		del(tb_cate);
 		if(res.length>0){
			for(var i=0; i <res.length; i++){
				var tr_1 = document.createElement("tr");
				var td_1 = document.createElement("td");
				var td_2 = document.createElement("td");
				var a = document.createElement("a");
				var onClickValue=res[i].cate_no;
				var check=document.createElement("input");
				check.setAttribute("name","cate_no");

				a.innerHTML=res[i].cate_name;
				a.setAttribute("href","#");
				a.setAttribute("onclick", "getTitle("+onClickValue+")");
				
				check.setAttribute("type", "checkbox");
				check.setAttribute("value", onClickValue);
				td_1.appendChild(a);
				td_2.appendChild(check);
				tr_1.appendChild(td_1);
				tr_1.appendChild(td_2);
				tb_cate.appendChild(tr_1);
			}
		}
	}
}
//--------------------------------------------------------------------------
function titleList(f, state){
	var name = f.title_no;
	var param=null;
	var checkedVal = checkedName(name, state);
	if(checkedVal==false||checkedVal==null){
		if(state=="delete"){
			alert("삭제할 목록이 선택되지 않았습니다!");
			return;
		}
		alert("교체할 리스트가 존재하지 않습니다.!");
		return;
	}
	if(state=="delete"){
		if(confirm("삭제 하시겠습니까?")==false)return;
	}
	else if(state=="rename"){
		var new_name=f.title_value.value;
		var dv_bt3=document.getElementById("modify_bt3");
		var dv_bt4=document.getElementById("modify_bt4");
		
		if(new_name==null){
			alert("새로운 항목을 입력하세요");
			return;
		}
		dv_bt3.style.display="block";
		dv_bt4.style.display="none";
		
		param=
			"title_no="+checkedVal+"&state="+state+"&menu_no="+${menu_no}+"&title_name="+encodeURIComponent(new_name);
		f.title_value.value="";	
				
	}
	else{
		param="title_no="+checkedVal+"&state="+state+"&menu_no="+${menu_no};
	}
	
	sendRequest("../ajax/change_title.jsp", param, resultTitle, "POST");
}

function title_btHidden(f, state){
	var name = f.title_no;
	var checkedVal = checkedName(name,state);
	
	if(checkedVal==null){
		alert("수정할 항목을 선택하세요!");
		return;
	}
	
	else if(checkedVal!=""||checkedVal!=null){
		var dv_bt3=document.getElementById("modify_bt3");
		dv_bt3.style.display="none";
		var dv_bt4=document.getElementById("modify_bt4");
		dv_bt4.style.display="block";
	} 
		
}

</script>
</head>
<body>
			<div class="box">
				<h3>
					<p>Welcome to</p>
				 <p>Java Programing!</p>
				</h3>
			</div>
			
			
			
			<div class="box"  >
			<form name="f1">
				<div id="dv_cate">
					<div style="border:1px solid yellow; width:30%; position: relative; float:left;">
					<h2>카테고리</h2>
					<table id="tb_cate">
					<thead></thead>
					<tbody>
					<c:forEach var="cate" items="${study_cate }" varStatus="i">
						<tr>
							<td colspan="4">
								<a href="#" onclick="getTitle(${cate.cate_no})">${cate.cate_name }</a>
							</td>
							<td colspan="4">
								<input type="checkbox" name="cate_no" id="cate_${i}" value="${cate.cate_no }">
							</td>
						</tr>
					</c:forEach>
					</tbody>	
					</table>
					</div>
					<div style="border:1px solid yellow; width:30%; float:left;">
							<table >
								<tr>
									<td>
										<input type="button" value="위로" onclick="cateList(this.form,'up')">
									</td>
								</tr>
								<tr>
									<td>
										<input type="button" value="아래" onclick="cateList(this.form,'down')">
									</td>
								</tr>
								<tr>
									<td>
										<div id="modify_bt1">
											<input type="button" value="수정" onclick="cate_btHidden(this.form,'rename')">
										</div>
										<div id="modify_bt2" style="display:none">
											<input type="text" name="cate_value" >
											<input type="button" value="정정" onclick="cateList(this.form,'rename')">
										</div>
									</td>		
								</tr>
								<tr>
									<td>
										<input type="button" value="삭제" onclick="cateList(this.form,'delete')">
									</td>
								</tr>
							</table>
					</div>	
				</div>
			</form>
			<form name="f2">
				<div id="dv_t" style="display:none;">	
					<div id="dv_title"   style=" border:1px solid yellow; width:30%; position: relative; float:left; clear:both;">
						<h2>타이틀</h2>
							<table id="tb_title">
							<thead></thead>
							<tbody></tbody>
							</table>
					</div>
					
					<div style="border:1px solid yellow; width:30%; float:left;">
							<table >
								<tr>
									<td>
										<input type="button" value="위로" onclick="titleList(this.form,'up')">
									</td>
								</tr>
								<tr>
									<td>
										<input type="button" value="아래" onclick="titleList(this.form,'down')">
									</td>
								</tr>
								<tr>
									<td>
										<div id="modify_bt3">
											<input type="button" value="수정" onclick="title_btHidden(this.form,'rename')">
										</div>
										<div id="modify_bt4" style="display:none">
											<input type="text" name="title_value" >
											<input type="button" value="정정" onclick="titleList(this.form,'rename')">
										</div>
									</td>		
								</tr>
								<tr>
									<td>
										<input type="button" value="삭제" onclick="titleList(this.form,'delete')">
									</td>
								</tr>
							</table>
					</div>
				</div>
			</form>
			<form name="f3">
			<div id="dv_s" style="display:none;">	
				<div id="dv_sub" style=" border:1px solid yellow; width:30%; position: relative; float:left; clear:both;">
				<h2>제목</h2>
					<table id="tb_sub">
					<thead></thead>
					<tbody></tbody>	
					</table>
				</div>
					<div style="border:1px solid yellow; width:30%; float:left;">
							<table >
								<tr>
									<td>
										<input type="button" value="위로" onclick="cateList(this.form,'up')">
									</td>
								</tr>
								<tr>
									<td>
										<input type="button" value="아래" onclick="cateList(this.form,'down')">
									</td>
								</tr>
								<tr>
									<td>
										<div id="modify_bt1">
											<input type="button" value="수정" onclick="btHidden(this.form,'rename')">
										</div>
										<div id="modify_bt2" style="display:none">
											<input type="text" name="m_value" >
											<input type="button" value="정정" onclick="cateList(this.form,'rename')">
										</div>
									</td>		
								</tr>
								<tr>
									<td>
										<input type="button" value="삭제" onclick="cateList(this.form,'delete')">
									</td>
								</tr>
							</table>
					</div>
			</div>
			</form>								
		</div>
			
</body>
</html>